<template>
	<view class="home-classroom-con">
		<view class="home-classroom-cons">
			<view class="home-classroom-con-img">
				<image class="image" :src="roomInfo.room_bannerimage" mode=""></image>
				<view class="tips">{{roomInfo.min_price}}元起</view>
			</view>
			<view class="home-classroom-con-text">
				<view class="home-classroom-con-text-one">
					{{roomInfo.room_name}}
				</view>
				<view class="home-classroom-con-text-two">面积：{{roomInfo.room_area}}平</view>
				<view class="home-classroom-con-text-two">推荐人数： {{roomInfo.room_personnum}}人</view>
				<button class="home-classroom-con-text-btn" style="color: #F3F4F6;"
					@click="goClass(roomInfo.id)">点击预约</button>
			</view>
		</view>
		<view class="home-classroom-yy">
			<view class="home-classroom-yy-tit">
				<view class="" style="color: #909399; font-size: 24rpx;">
					预约状态
				</view>
				<view class="home-classroom-yy-tit-r">
					<view class="home-classroom-yy-tit-r-con">
						<view class="home-classroom-yy-tit-r-zfx"></view>
						<text>不可用</text>
					</view>
					<view class="home-classroom-yy-tit-r-con">
						<view class="home-classroom-yy-tit-r-zfxs"></view>
						<text>可用</text>
					</view>
				</view>
			</view>
			<view class="progress-content">
				<view class="test">
					<view class="aa">
						<view class="bb" v-for="v,i in filterTime" :key="i">
							<view class="cc">
							</view>
						</view>
					</view>
					<view class="a">
						<view class="b" v-for="v,i in filterTime" :key="i">
							{{v}}
						</view>
					</view>
					<view class="zz">
						<view class="xx" :class="v.state==2?'bg-diss':''" v-for="v,i in allTime" :key="i">
							<view class="vv">
								<!-- {{v.state}} -->
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="aa">
					<view class="b" v-for="v,i in filterTime" :key="i">
						<view class="c" :data-label="v"></view>
					</view>
					
				</view> -->
				<!-- <view class="jindu">
					:class="i==9||i==3||i==5?'bukeyong':'keyong'"
					<view class="jindu-all bukeyong" v-for="v,i in filterTime">
						<view class="aa bukeyong" v-for="item,index in v.status">

						</view>
						<text>{{i*2}}</text>
					</view>
					<view class="jindu-all bukeyong" style="text-align: right;right: 0;">
						<view class="aa bukeyong">

						</view>
						<text>24</text>
					</view>
				</view> -->
				<!-- <view class="progess" id="progess"> -->
				<!-- <view class="scale" v-for="(item,index) in 9" :style="{left:`${avg*(index+1)}px`}" :key="index">
					</view> -->
				<!-- 不可用是一段一段的中间如果有时间间隔就是不可用 -->
				<!-- <view class="disabled-time" v-for="(item,index) in disabledTimeArr"
						:style="{width:`${item.width}px`,left:`${item.left}px`}">

					</view> -->
				<!-- 关门的时间也可能是片段， -->
				<!-- <view class="close-time" v-for="(item,index) in closeTimeArr"
						:class="{isEnd:index===this.closeTimeArr.length-1}"
						:style="{width:`${item.width}px`,left:`${item.left}px`}">

					</view> -->

				<!-- </view> -->
				<!-- <text class="hourText" v-for="(item,index) in 13" :key="index"
					:style="{left: item>=5 ? `${(avg*index)-6}px` : `${avg*index-2}px`}">{{item*2}}</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			roomInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				// 进度条长度
				processWidth: 0,
				avg: 0,
				roomTimes: [],
				//  不可用时间数组
				disabledTimeArr: [],
				// 可用时间数组
				useTimeArr: [],
				//  关门时间数组
				closeTimeArr: [],
				// 最低的价格
				minPrice: "",
				filterTime: [],
				allTime: []
			};
		},
		created() {
			// console.log(this.roomInfo);
			// for (let i = 0; i < this.roomInfo.time.length; i++) {
			// 	this.filterTime[i] = {

			// 	}
			// }
			let time = {
				start: '',
				end: '',
				len: 0,
				tem: 0
			}
			const originalArray = this.roomInfo.time
			this.allTime = this.roomInfo.time
			// console.log(this.roomInfo.time);
			time.start = time.tem = +this.roomInfo.time[0].start.slice(0, 2)
			time.end = +this.roomInfo.time[originalArray.length - 1].end.slice(0, 2) + 1
			time.len = Math.ceil((time.end - time.start) / 2)
			console.log(this.filterTime, time);
			for (let i = 0; i < time.len; i++) {
				if (i == 0) {
					this.filterTime[i] = time.start
				} else {
					this.filterTime[i] = time.start = +time.start + 2

				}
			}
			this.filterTime.push(time.end)
			// console.log(this.filterTime, time);
			// return
			// const newArray = [];
			// for (let i = 0; i < time.len; i += 4) {
			// 	const group = {
			// 		status: []
			// 	};

			// 	for (let j = i; j < i + 4; j++) {
			// 		if (originalArray[j]) {
			// 			group.status.push({
			// 				status: originalArray[j].state,
			// 				start: originalArray[j].start,
			// 				end: originalArray[j].end
			// 			});
			// 		} else {
			// 			group.status.push(0);
			// 		}
			// 	}

			// 	newArray.push(group);
			// }
			// this.filterTime = newArray
			// console.log(newArray, 11111111111);

			// let info = uni.createSelectorQuery().in(this).select(".progess");
			// info.boundingClientRect((data) => {
			// 	this.processWidth = data.width;
			// 	this.avg = (data.width / 12).toFixed(1);
			// }).exec();
			// this.setDisabledTime()
			//   获取时间
		},
		methods: {
			goClass(id) {
				uni.navigateTo({
					url: `/pages/class-room/class-room?id=${id}`
				})
			},

			// 给我一个时间戳返回一个yyy-mm-dd的时间格式
			setCurrentDate(timer) {
				const date = new Date(timer);
				const month = date.getMonth() + 1 < 10 ? `0${date.getMonth()+1}` : date.getMonth() + 1;
				const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
				return `${date.getFullYear()}-${month}-${day}`
			},
			// 设置关门时间
			setCloseTime() {
				const firstTime = this.roomTimes[0];
				//  开始时间与00:00之间的间断时间
				const startDifferenceMinits = this.getTimesDifference("00:00", firstTime.start);
				//  结束时间与23:59之间的间断时间
				const startWidth = (startDifferenceMinits / (24 * 60)) * this.processWidth;
				this.closeTimeArr.push({
					width: startWidth,
					left: 0,
				})
				//  结束时间相关
				const lastTime = this.roomTimes[this.roomTimes.length - 1];
				const endDifferenceMinits = this.getTimesDifference(lastTime.end, "23:59");
				//  width长度就是他们的时差乘进度条的长度
				const endWidth = (endDifferenceMinits / (24 * 60)) * this.processWidth;
				//  left就是他的结束时间与00:00的时差
				const left = (this.getTimesDifference("00:00", lastTime.end) / (24 * 60)) * this.processWidth;
				this.closeTimeArr.push({
					width: endWidth,
					left: left,
				})
			},
			// 计算不可用的时间
			setDisabledTime() {
				for (let i = 0; i < this.filterTime.length; i++) {
					for (var j = 0; i < this.filterTime[i].status.length; i++) {
						// if (this.filterTime[i].state === 1) {
						const differenceMinits = this.getTimesDifference(this.filterTime[i].status[j].start, this
							.filterTime[i].status[j].end);
						// 计算在一天中占用了百分之多少也就是他自己的宽度
						const width = (differenceMinits / (24 * 60)) * this.processWidth;
						//---------------------------------------------------
						// 计算它的left（也就是与00:00之间差多少分钟）
						const left = (this.getTimesDifference("00:00", this.filterTime[i].status[j].status) / (24 * 60)) *
							this
							.processWidth;
						this.disabledTimeArr.push({
							width: width, //  单位px
							left: left, //  单位px
						})
						// }
					}
				}
			},
			// 给我两个（00:00）格式的时间返回你两之间差了多少分钟，24小时格式
			getTimesDifference(startTime, endTime) {
				const startTimeArr = startTime.split(":").map(Number);
				const endTimeArr = endTime.split(":").map(Number);
				//  start和end之间相差了多少分钟
				let differenceMinits = 0;
				if (endTimeArr[0] > startTimeArr[0]) {
					differenceMinits = (endTimeArr[0] - startTimeArr[0]) * 60
				}
				differenceMinits += endTimeArr[1] - startTimeArr[1];
				return differenceMinits
			}

		}
	}
</script>

<style lang="scss" scoped>
	.home-classroom-con {
		background: #F3F4F6;
		box-sizing: border-box;
		padding: 24rpx;
		height: 476rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 24rpx;

		.home-classroom-cons {
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #D2D2D2;
			display: flex;

			.home-classroom-con-img {
				width: 358rpx;
				height: 244rpx;
				overflow: hidden;
				border-radius: 4rpx;
				position: relative;

				.image {
					width: 100%;
					height: 100%;

				}

				.tips {
					width: 100%;
					text-align: end;
					padding: 0 10rpx;
					box-sizing: border-box;
					position: absolute;
					bottom: 0;
					height: 50rpx;
					line-height: 50rpx;
					background: rgba(70, 70, 70, 0.4);
					color: #fff;
					font-size: 28rpx;
				}

			}

			.home-classroom-con-text {
				margin-left: 24rpx;

				.home-classroom-con-text-one {
					color: #000000 100%;
					font-size: 32rpx;
					font-weight: 500;
					height: 48rpx;
				}

				.home-classroom-con-text-two {
					font-size: 28rpx;
					color: #48494B;
					margin-top: 16rpx;
					height: 42rpx;
					line-height: 42rpx;
				}

				button {
					margin-top: 28rpx;
					width: 184rpx;
					height: 58rpx;
					background: #40C6A1;
					font-size: 28rpx;
					text-align: center;
					line-height: 58rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}
		}
	}

	.home-classroom-yy {
		margin-top: 24rpx;

		.progress-content {
			margin-top: 20rpx;
			position: relative;

			.test {
				width: 100%;
				position: relative;

				.zz {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					display: flex;

					.bg-diss {
						// background-color: red;
						background-color: #B1F2E0;
					}


					.xx {
						width: 100%;
						height: 24rpx;

						&:first-child {
							border-radius: 10rpx 0 0 10rpx;
						}

						&:last-child {
							border-radius: 0 10rpx 10rpx 0;
						}


					}
				}

				.aa {
					width: 100%;
					font-size: 24rpx;
					height: 24rpx;
					display: flex;
					justify-content: space-between;
					background-color: #40C6A1;
					position: relative;
					border-radius: 30px;

					.bb {
						width: 10%;
						height: 100%;
						display: flex;
						align-items: flex-end;

						.cc {
							// background-color: red;
							width: 100%;
							height: 50%;
							// border-right: 1px solid #fff;
						}
					}
				}

				.a {
					width: 100%;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
					position: relative;
					// top:16rpx;
					line-height: 2;

					.b {
						position: relative;

						&::after {
							content: '';
							position: absolute;
							top: -12rpx;
							left: 50%;
							width: 2rpx;
							height: 12rpx;
							background-color: #fff;
						}

						&:first-child::after {
							background-color: transparent;
						}

						&:last-child::after {
							background-color: transparent;
						}
					}
				}



			}

			.jindu {
				width: 100%;
				display: flex;
				justify-content: space-between;
				text-align: center;

				.keyong {
					background-color: #40C6A1;
				}

				.bukeyong {
					background-color: #B1F2E0;
				}

				.jindu-all {
					&:first-child {
						border-radius: 12rpx 0 0 12rpx;
						border-left: 0 solid red !important;
					}

					&:last-child {
						border-radius: 0 12rpx 12rpx 0;
					}

					flex: 1;
					height: 100%;
					position: relative;
					font-size: 24rpx;
					display: flex;
					align-items: flex-end;

					.aa {
						display: flex;

						border-left: 1px solid #fff;
						height: 12rpx;
					}

					text {
						position: absolute;
						left: 0;
						transform: translateX(-50%);
						bottom: -30rpx;
					}
				}
			}

			.hourText {
				position: absolute;
				font-size: 24rpx;
				margin-top: 20rpx;
			}

			.progess {
				position: relative;
				width: 100%;
				height: 24rpx;
				background-color: #40C6A1;
				border-radius: 12rpx;

				.scale {
					position: absolute;
					bottom: 0;
					height: 12rpx;
					width: 4rpx;
					background-color: white;
					z-index: 99;
				}

				.disabled-time {
					// width: 30%;
					background-color: #B1F2E0;
					height: 24rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					position: absolute;
				}

				.close-time {
					// background-color: #B1F2E0;
					background-color: #ddd;
					height: 24rpx;
					border-radius: 12rpx 0rpx 0rpx 12rpx;
					position: absolute;
				}

				.isEnd {
					border-radius: 0rpx 12rpx 12rpx 0rpx;
				}

				// .use-time{
				// 	height: 24rpx;
				// 	border-radius: 12rpx 0rpx 0rpx 12rpx;
				// 	position:absolute;
				// 	background-color: #40C6A1;
				// }
			}
		}

		.home-classroom-yy-tit {
			display: flex;
			justify-content: space-between;

			.home-classroom-yy-tit-r {
				display: flex;

				.home-classroom-yy-tit-r-con {
					display: flex;
					align-items: center;

					.home-classroom-yy-tit-r-zfx {
						width: 16rpx;
						height: 16rpx;
						margin-right: 16rpx;
						background: #B1F2E0;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}

					text {
						color: #C1C3C7;
						font-size: 24rpx;
					}
				}

				.home-classroom-yy-tit-r-zfxs {
					width: 16rpx;
					margin-right: 16rpx;
					margin-left: 32rpx;
					height: 16rpx;
					background: #40C6A1;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}

			}
		}


	}

	.aa {
		display: flex;
		justify-content: space-between;
		background: #40C6A1;
		font-size: 24rpx;
		align-items: flex-end;
		height: 24rpx;
		width: 100%;
		border-radius: 10px;
		position: relative;

		.b {
			width: 100%;

			.c {

				width: 50%;
				text-align: right;
				// background-color: #000;
				height: 12rpx;
				border-right: 1px solid #fff;
				position: relative;

				&::after {
					content: attr(data-label);
					position: absolute;
					top: 16rpx;
					// left: -50%;
					transform: translateX(-50%);
					font-size: 12px;
					color: #000;
					white-space: nowrap;
				}
			}
		}

		.bb {
			position: absolute;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;

			.bg-diss {
				// background-color: red;
				background-color: #B1F2E0;
			}


			.cc {
				width: 100%;
				height: 100%;

				&:first-child {
					border-radius: 10rpx 0 0 10rpx;
				}

				&:last-child {
					border-radius: 0 10rpx 10rpx 0;
				}


			}

			// width: 100%;
		}
	}
</style>